<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews36.jpg">
				<div style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12"
						style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;">
						<img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png" />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>创新联合体</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'联合体介绍':menuIndex==1?'创新课题':menuIndex==2?'课题组征集':''}}</span>
					</div>
				</div>
			</div>

			<div style="display: none;" class="mobilePadding mobileBlock">
				<el-tabs v-model="menuIndex" @tab-click="tabsClick">
					<template
						v-for="item in [{name:'行业方案',value:'0'}, {name:'机构方案',value:'1'}, {name:'专家文章',value:'2'}, {name:'方案征集',value:'3'}]">
						<el-tab-pane :name="item.value" :label="item.name"></el-tab-pane>
					</template>
				</el-tabs>
				<div style="display: flex;justify-content: flex-end;">
					<img v-if="menuIndex == 0" style="width: 100px;height: 31px;cursor: pointer;"
						src="@/assets/images/industryNews22.png" @click="applyInnovation">
					<img v-if="menuIndex == 2" style="width: 100px;height: 31px;cursor: pointer;"
						src="@/assets/images/industryNews35.png" @click="collect">
				</div>
			</div>

			<div class="indexContainer mobilePadding"
				style="display: flex;align-items: center;justify-content: center;padding: 30px 0;">
				<div>
					<el-row>
						<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
							<div class="mobileNone">
								<img style="width: 202px;height: auto;" src="@/assets/images/industryNews37.png">
								<ul>
									<li v-for="(item, index) in ['联合体介绍', '创新课题', '课题组征集']" :key="item"
										style="margin: 20px 0 0 8px;border-bottom: 1px dashed #ccc;padding-bottom: 20px;width: 194px;cursor: pointer;"
										@click="handleMenu(index)">
										<template v-if="menuIndex == index">
											<img style="width: 7px;height: 12px;"
												src="@/assets/images/industryNews3.png">
										</template>
										<template v-else>
											<img style="width: 7px;height: 12px;"
												src="@/assets/images/industryNews2.png">
										</template>
										<span
											:style="{ 'font-size': '18px', 'color': menuIndex == index ? '#2468f2' : '#999', 'margin-left': '10px' }">{{
								                    item }}</span>
									</li>
								</ul>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
							<template v-if="menuIndex == 0">
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="position: relative;">
											<img style="width: 100%;height: auto;"
												src="@/assets/images/industryNews38.png" class="mobileNone">
											<img style="width: 138px;height: 44px;position: absolute;right: 0px;top:10px;cursor: pointer;"
												src="@/assets/images/industryNews39.png" @click="applyInnovation"
												class="mobileNone">
										</div>

										<div
											style="display: flex;flex-direction: column;justify-content: center;;width: 100%;align-items: center;padding: 10px;">
											<div style="font-size: 24px;color: #333;">创新联合体介绍</div>
											<div style="border-bottom: 2px solid #2468f2;width: 100px;margin-top: 5px;">
											</div>
										</div>
										<div style="padding: 30px;background-color: #f4f4f4;margin-top: 10px;"
											class="mobilePadding">
											<div style="background-color: #fff;padding: 30px;" class="mobilePadding">
												<div v-html="innovationInfo.purpose"></div>
											</div>
										</div>

									</el-col>
								</el-row>
							</template>

							<template v-if="menuIndex == 1">
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

										<div style="position: relative;">
											<img style="width: 100%;height: auto;"
												src="@/assets/images/industryNews43.png" class="mobileNone">
											
											<div
												style="display: flex;flex-direction: column;justify-content: center;;width: 100%;align-items: center;padding: 10px;margin-bottom: 10px;">
												<div style="font-size: 24px;color: #333;">课题列表</div>
												<div
													style="border-bottom: 2px solid #2468f2;width: 100px;margin-top: 5px;">
												</div>
											</div>
											
											<filters @change="filterChange"></filters>
											
											
											<div style="margin:0px 60px 40px;" class="mobileMargin">
												

												
												<el-row :gutter="15" v-loading="loading"
													:style="{'margin-top':loading==true?'100px':'0px'}">
													<el-col v-for="item in listData" :key="item.id" :xs="24" :sm="24"
														:md="8" :lg="8" :xl="8" style="margin-top: 15px;">
														<div style="background-image: linear-gradient(-30deg, #e4ecf8 0%, #f1f5f9 100%);border-radius: 5px;"
															class="plan" @click="toDetail(item.id)">
															<div
																style="margin: 0 15px;padding: 15px 0;border-bottom: 1px solid #cbcbcb;">
																<h4 style="font-size: 18px;color: #333333;line-height: 20px;height: 40px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
																	{{item.name}}
																</h4>
																<div
																	style="font-size: 14px;line-height: 20px;color: #555555;margin-top: 8px;height: 60px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
																	{{item.description}}
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>成员数：</span>
																	<span
																		style="color: #555555;">{{item.memberDtos.length}}</span>
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>适用行业：</span>
																	<span
																		style="color: #555555;">{{item.applicableIndustry}}</span>
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>成组时间：</span>
																	<span
																		style="color: #555555;">{{item.publishTime}}</span>
																</div>

																<div
																	style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 12px;">
																	<div style="display: flex;align-items: center;">
																		<img style="width: 16px;height: 16px;"
																			src="@/assets/images/industryNews8.png">
																		<span
																			style="color: #555;margin-left: 3px;">{{item.releaseUser}}</span>
																	</div>

																	<div style="display: flex;align-items: center;">
																		<img style="width: 20px;height: 13px;"
																			src="@/assets/images/industryNews24.png">
																		<span
																			style="color: #aaa;margin-left: 3px;">{{item.pageViews}}</span>
																	</div>
																</div>
															</div>

															<div style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
																class="apply" @click.stop="toDetail(item.id)">
																查看详情
															</div>
														</div>
													</el-col>

													<el-empty v-if="listData.length==0 && loading==false"
														description="暂无内容"></el-empty>
												</el-row>
											</div>
										</div>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="text-align: center;margin-top: 40px;">
											<el-pagination v-if="listData.length!=0" background
												layout="prev, pager, next" :total="total" :page-size="6"
												:pager-count="5" @current-change="handleCurrentChange">
											</el-pagination>
										</div>
									</el-col>
								</el-row>
							</template>

							<template v-if="menuIndex == 2">
								<el-row>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

										<div style="position: relative;">
											<img style="width: 100%;height: auto;"
												src="@/assets/images/industryNews44.png" class="mobileNone">
											<img style="width: 138px;height: 44px;position: absolute;right: 60px;top:10px;cursor: pointer;"
												src="@/assets/images/industryNews22.png" @click="collect"
												class="mobileNone">
											
											<div
												style="display: flex;flex-direction: column;justify-content: center;;width: 100%;align-items: center;padding: 10px;margin-bottom: 10px;">
												<div style="font-size: 24px;color: #333;">课题组征集</div>
												<div
													style="border-bottom: 2px solid #2468f2;width: 100px;margin-top: 5px;">
												</div>
											</div>
											
											<filterCollect @change="filterChange"></filterCollect>

											<div style="margin:0px 60px 40px;" class="mobileMargin">
												

												<el-row :gutter="15" v-loading="loading"
													:style="{'margin-top':loading==true?'100px':'0px'}">
													<el-col v-for="item in listData" :key="item.id" :xs="24" :sm="24"
														:md="8" :lg="8" :xl="8" style="margin-top: 15px;">
														<div style="background-image: linear-gradient(-30deg, #e4ecf8 0%, #f1f5f9 100%);border-radius: 5px;"
															class="plan" @click="toCollectDetail(item.id)">
															<div
																style="margin: 0 15px;padding: 15px 0;border-bottom: 1px solid #cbcbcb;">
																<h4 style="font-size: 18px;color: #333333;line-height: 20px;height: 40px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
																	{{item.name}}
																</h4>
																<div
																	style="font-size: 14px;line-height: 20px;color: #555555;margin-top: 8px;height: 60px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
																	{{item.description}}
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>适用行业：</span>
																	<span
																		style="color: #555555;">{{item.applicableIndustry}}</span>
																</div>
																<div
																	style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
																	<span>发布日期：</span>
																	<span
																		style="color: #555555;">{{item.publishTime}}</span>
																</div>

																<div style="font-size: 14px;color: #aaaaaa;">报名期限：
																</div>
																<div
																	style="display: flex;align-items: center;justify-content: space-between;margin-top: 5px;">
																	<div
																		style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
																		<img style="width: 14px;height: 15px;"
																			src="@/assets/images/industryNews23.png"
																			alt="">
																		<span v-if="item.startTime&&item.startTime.length>10"
																			style="font-size: 14px;color: #555555;">{{ item.startTime.slice(0, 10) }}</span>
																	</div>
																	<div style="font-size: 14px;color: #444444;">-
																	</div>
																	<div
																		style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
																		<img style="width: 14px;height: 15px;"
																			src="@/assets/images/industryNews23.png"
																			alt="">
																		<span v-if="item.endTime&&item.endTime.length>10"
																			style="font-size: 14px;color: #555555;">{{ item.endTime.slice(0, 10) }}</span>
																	</div>
																</div>

																<div
																	style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 12px;">
																	<div style="display: flex;align-items: center;">
																		<img style="width: 16px;height: 16px;"
																			src="@/assets/images/industryNews8.png">
																		<span
																			style="color: #555;margin-left: 3px;">{{item.releaseUser}}</span>
																	</div>

																	<div style="display: flex;align-items: center;">
																		<img style="width: 20px;height: 13px;"
																			src="@/assets/images/industryNews24.png">
																		<span
																			style="color: #aaa;margin-left: 3px;">{{item.pageView}}</span>
																	</div>
																</div>
															</div>

															<div v-if="item.isApply&&item.isApply==true"
																style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
																class="apply" @click.stop="toApply(item)">
																我要报名
															</div>

															<div v-else
																style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
																class="apply2" @click.stop="apply2()">
																我要报名
															</div>
														</div>
													</el-col>

													<el-empty v-if="listData.length==0 && loading==false"
														description="暂无内容"></el-empty>
												</el-row>
											</div>
										</div>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<div style="text-align: center;margin-top: 40px;">
											<el-pagination v-if="listData.length!=0" background
												layout="prev, pager, next" :total="total" :page-size="6"
												:pager-count="5" @current-change="handleCurrentChange">
											</el-pagination>
										</div>
									</el-col>
								</el-row>
							</template>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>

		<Footer />
		<schemeDialog ref="schemeDialog" @reloadData="contributeSuccess"></schemeDialog>
		<collectDialog ref="collectDialog" @reloadData="contributeSuccess"></collectDialog>
		<contributeDialog ref="contributeDialog" @getNewList="contributeSuccess"></contributeDialog>
		<topicDialog ref="topicDialog" @getNewList="contributeSuccess"></topicDialog>
		<!-- 加入联合体申请表单 -->
		<FormDialog ref="formContent" />
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	// import FormDialog from "@/components/index/consortium/formDialog.vue"
	import schemeDialog from "@/view/personalCenter/myPlanPromotion/dialogScheme"; //方案发布
	import collectDialog from "@/view/personalCenter/myPlanPromotion/dialogCollect"; //方案征集
	import contributeDialog from "@/view/personalCenter/myPlanPromotion/dialogContribute"; //方案投稿
	import topicDialog from "@/view/personalCenter/myTopic/newDialog.vue";
	import filters from "./filter.vue";
	import filterCollect from "./filterCollect.vue";
	import {
		getInnovationList, // 联合体列表
		getInnovationListDetail, //联合体详情
		getAllianceCollectingList, //创新课题列表 不登录
		postAllianceCollectingApply, //报名
	} from "@/request/api/innovationConsortium";
	import {
		eduApplyStatus,
		eduListNo
	} from "@/request/api/education"
	import {
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			Header,
			Footer,
			schemeDialog,
			collectDialog,
			contributeDialog,
			filters,
			filterCollect,
			FormDialog,
			topicDialog
		},
		data() {
			return {
				menuIndex: '0',
				loading: false,
				innovationInfo: {}, //联合体详情

				page: 1,
				total: 0,
				listData: [],

				filterInfo: {}, //筛选回调
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
			}
			// 联合体介绍
			this.getList()
		},
		methods: {
			// 筛选回调
			filterChange(e) {
				console.log('filterChange', e)
				this.filters = e
				this.getAllianceCollectingList()
			},
			// 手机标签
			tabsClick(tab) {
				// console.log('tabsClick',tab);
				this.page = 1
				this.menuIndex = tab.name
				if (this.menuIndex == 0) {
					this.getList()
				} else {
					this.getAllianceCollectingList()
				}
			},
			// 提示
			contributeSuccess() {
				this.$confirm("是否去个人中心查看?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$router.push({
						name: "myTopic"
					});
				}).catch(() => {
					if (this.menuIndex == 0) {
						this.getList()
					} else {
						this.getAllianceCollectingList()
					}
				});
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				if (this.menuIndex == 0) {
					this.getList()
				} else {
					this.getAllianceCollectingList()
				}
			},
			// 点击菜单
			handleMenu(index) {
				this.menuIndex = String(index)
				this.page = 1
				if (this.menuIndex == 0) {
					this.getList()
				} else {
					this.getAllianceCollectingList()
				}
			},
			// 获取联合体列表
			getList() {
				this.listData = []
				this.loading = true
				getInnovationList().then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 200) {
						let list = res.data.result.items
						if (list.length) {
							getInnovationListDetail(list[0].id).then((res) => {
								// console.log('res',res)
								this.loading = false
								if (res.data.code == 200) {
									this.innovationInfo = res.data.result
								} else {
									this.$message({
										message: res.data.message,
										type: "warning",
									});
								}
							}).catch((err) => {
								this.loading = false
								console.log('err', err)
							})
						}
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 课题组列表
			getAllianceCollectingList() {
				this.listData = []
				this.loading = true
				let params = {
					verifyStatus: "", // 审核状态（0待审核 1通过 2驳回）
					startTime: this.filters.startTime,
					endTime: this.filters.endTime,
					applicableIndustry: this.filters.applicableIndustry,
					name: this.filters.name,
					ordered: this.filters.ordered,
					numberOrdered: this.filters.numberOrdered,
					pageViews: this.filters.pageViews,
					page: this.page,
					pageSize: 6
				}
				getAllianceCollectingList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 200) {
						let listData = res.data.result.items;
						this.total = res.data.result.total;

						let now = new Date().getTime()

						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								listData.map((item) => {
								
									let start = new Date(item.startTime).getTime()
									let end = new Date(item.endTime).getTime()
									if (start < now && now < end && item.verifyStatus!=5) {
										item.isApply = true
									}

									list.map((item2) => {
										if (item.applicableIndustry && item
											.applicableIndustry == item2.value) {
											item.applicableIndustry = item2.label
										}
									})
								})
								this.listData = listData
							}
						})

					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 创新课题详情
			toDetail(id) {
				this.$router.push({
					name: "topicDetail",
					query: {
						id
					},
				});
			},
			// 创新课题征集详情
			toCollectDetail(id) {
				this.$router.push({
					name: "topicCollectDetail",
					query: {
						id
					},
				});
			},
			// 我要加入
			applyInnovation() {
				// 判断是否登录
				if (window.sessionStorage.getItem("userInfo") !== null) {
					// 判断申请加入状态
					let params = {
						allianceType: '0', //联合体分类(0 创新联合体,1产教联合体)
					}
					eduApplyStatus(params).then(res => {
						if (res.data.code == 200) {
							var status = res.data.result.status //申请状态 (0 待审核,1 已通过,2 已驳回,3 退出,4 未申请)
							if (status == '0') { //待审核
								this.$message({
									message: "申请处于待审核状态，请耐心等待审核结果！",
									type: "warning",
								});
							} else if (status == '1') { //审核通过
								this.$message({
									message: "您已经加入该联合体了，无需重复申请！",
									type: "warning",
								});
							} else if (status == '2' || status == '3' || status == '4') { //2审核驳回、3退出、4未申请，可以重新申请
								// 判断申请认证情况
								var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
								if (userInfo.iuiCertification === "1") { //认证通过
									// 判断个人和机构
									if (userInfo.registrationType == '1') {
										this.params.userType = '0' //0个人用户，1机构
										this.params.type = '0' //0创新联合体，1产教联合体
									} else {
										this.params.userType = '1' //0个人用户，1机构
										this.params.type = '0' //0创新联合体，1产教联合体
									}

									this.$refs.formContent.open('add', this.params, userInfo)
								} else {
									this.$message({
										message: "您尚未进行实名认证或认证申请处于审核状态，请先认证后再进行相关操作！",
										type: "warning",
									});
								}
							}
						}
					})

				} else {
					this.$message({
						message: "请登录！",
						type: "warning",
					});
				}
			},
			// 我要报名
			toApply(item) {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$confirm("确定报名《"+item.name+"》吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					postAllianceCollectingApply({collectingId:item.id}).then((res) => {
						// console.log('res',res)
						if (res.data.code == 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							
							setTimeout(()=>{
								this.contributeSuccess()
							},500)
						} else {
							this.$message({
								message: res.data.message,
								type: "warning",
							});
						}
					}).catch((err) => {
						console.log('err', err)
					})
				}).catch(() => {
				});
			},
			apply2(){
				this.$message({
					message: '不在报名有效期内或已组建完成',
					type: "warning",
				});
			},
			// 我要征集
			collect(id) {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.topicDialog.open('add')
			}
		}
	}
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileMargin {
			margin: 10px !important;
		}

		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	.plan:hover {
		cursor: pointer;
		overflow: hidden;
		box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
		transform: scale(1.01, 1.01);
		transition-delay: 0.15s;

		.apply {
			transition-delay: 0.15s;
			background-color: #2468f2;
			color: #fff !important;
		}

		.apply2 {
			transition-delay: 0.15s;
			color: #999 !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
</style>